<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <ui:define name="head">
        <title>Weather Alert</title>
        <f:metadata>
            <f:viewParam name="id" value="#{weatherAlertBean.id}" />
            <f:viewAction action="#{weatherAlertBean.loadAlert()}" />
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <h1>Weather Alert</h1>
        <p:outputPanel rendered="#{weatherAlertBean.weatherAlert != null}">
            <p:outputLabel value="There are bad weather conditions concerning one of your events... Here are the details:" />
            <h:form>
                <h:panelGrid columns="2">
                    <p:outputLabel value="Event:" />
                    <p:link value="#{weatherAlertBean.weatherAlert.event.name}" outcome="eventDetails">
                        <f:param name="id" value="#{weatherAlertBean.weatherAlert.event.eventId}" />
                    </p:link>
                    <p:outputLabel value="City:" />
                    <p:outputLabel value="#{weatherAlertBean.weatherAlert.forecast.cityCountry}" />
                    <p:outputLabel value="Date:" />
                    <p:outputLabel value="#{weatherAlertBean.weatherAlert.forecast.date.toLocaleString()}" />
                    <p:outputLabel value="Weather:" />
                    <p:outputLabel value="#{weatherAlertBean.weatherAlert.forecast.formattedWeather}" />
                    <p:outputLabel value="Temperature:" />
                    <p:outputLabel value="#{weatherAlertBean.weatherAlert.forecast.temperature}&#176;C" />
                </h:panelGrid>
                <p:outputPanel rendered="#{weatherAlertBean.weatherAlert.creatorAlert}">
                    <p:outputPanel rendered="#{weatherAlertBean.weatherAlert.hasSuggestedDate()}">
                        <p:outputLabel value="We suggest you to postpone the event to this day" />
                        <h:panelGrid columns="2">
                            <p:outputLabel value="Proposed date: "/>
                            <p:calendar readonlyInput="true" value="#{weatherAlertBean.weatherAlert.suggestedDate}"
                                        disabled="true" pattern="dd/MM/yyyy HH:mm"/>
                        </h:panelGrid>
                        <p:commandButton value="Postpone" action="#{weatherAlertBean.postpone()}" />
                    </p:outputPanel>
                    <p:outputPanel rendered="#{!weatherAlertBean.weatherAlert.hasSuggestedDate()}">
                        <p:outputLabel value="Sorry, the system was unable to find a suitable date to postpone the event." />
                    </p:outputPanel>
                </p:outputPanel>
                <p:commandButton value="Cancel Event" action="#{weatherAlertBean.deleteEvent()}"
                                 rendered="#{weatherAlertBean.weatherAlert.creatorAlert}"/>
                <p:commandButton value="Cancel Participation" action="#{weatherAlertBean.cancelParticipation()}"
                                 rendered="#{weatherAlertBean.weatherAlert.participantAlert}"/>
                <p:commandButton value="Ignore" action="#{weatherAlertBean.ignore()}" />
            </h:form>
        </p:outputPanel>
    </ui:define>
</ui:composition>